<template>
  <div class="cropper-wrapper">
    <div class="img-box">
      <img class="cropper-image" :id="imgId" alt="">
    </div>
    <div class="right-con">
      <div v-if="preview" class="preview-box" :id="previewId"></div>
      <div class="button-box">
        <slot>
          <CustomUpload @chage="beforeUpload"> </CustomUpload>
        </slot>
        <div v-show="insideSrc">
          <Button type="primary" @click="rotate">
            <Icon type="md-refresh" :size="18" />
          </Button>

        </div>
      </div>

    </div>

    <div style="text-align: right;margin-top: 20px;">
      <Button style="width: 150px;margin-top: 10px;" type="primary" @click="crop">{{ cropButtonText }}</Button>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import './index.less'
import 'cropperjs/dist/cropper.min.css'
export default {
  name: 'Cropper',
  props: {
    src: {
      type: String,
      default: '',
    },
    preview: {
      type: Boolean,
      default: true,
    },
    moveStep: {
      type: Number,
      default: 4,
    },
    cropButtonText: {
      type: String,
      default: '裁剪',
    },
  },
  data() {
    return {
      actionUrl: window.rootVue.$config.apiUrl + 'sys_file/upload_oos_img',
      cropper: null,
      insideSrc: '',
      file: null,
    }
  },
  computed: {
    imgId() {
      return `cropper${this._uid}`
    },
    previewId() {
      return `cropper_preview${this._uid}`
    },
  },
  watch: {
    src(src) {
      this.replace(src)
    },
    insideSrc(src) {
      this.replace(src)
    },
  },
  methods: {
    beforeUpload(file) {
      this.file = file
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = async (event) => {
        this.getSize(event.srcElement.result).then(({ width, height }) => {
          if (width < 500 || height < 500) {
            rootVue.$Message.error('图片尺寸小于 500*500 ,请更换图片')
            return false
          }
          this.insideSrc = event.srcElement.result
        })
      }
      return false
    },
    getSize(src) {
      let pro = new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = function () {
          let { width, height } = img
          resolve({ width, height })
        }
        img.src = src
      })
      return pro
    },
    replace(src) {
      this.cropper.replace(src)
      this.insideSrc = src
    },
    rotate() {
      this.cropper.rotate(90)
    },
    shrink() {
      this.cropper.zoom(-0.1)
    },
    magnify() {
      this.cropper.zoom(0.1)
    },
    scale(d) {
      this.cropper[`scale${d}`](-this.cropper.getData()[`scale${d}`])
    },
    move(...argu) {
      this.cropper.move(...argu)
    },
    crop() {
      this.cropper.getCroppedCanvas({ fillColor: '#fff' }).toBlob(
        (blob) => {
          let file = new File([blob], this.file.name, {
            type: this.file.type,
            lastModified: Date.now(),
          })
          this.$emit('on-crop', file)
          this.insideSrc = ''
          this.filefile = null
        },
        'image/jpeg',
        0.8
      )
    },
  },
  mounted() {
    this.$nextTick(() => {
      let dom = document.getElementById(this.imgId)
      this.cropper = new Cropper(dom, {
        preview: `#${this.previewId}`,
        dragMode: 'move',
        checkCrossOrigin: true,
        aspectRatio: 5 / 5,
        cropBoxResizable: false,
        cropBoxMovable: false,
        outputSize: 0.8,
        minContainerWidth: 600, // 容器的最小宽度
        minContainerHeight: 600, // 容器的最小高度
      })
    })
  },
}
</script>
